import { dom, Nodes } from '@knno/dom';
import { DialogBase } from '../dialog/dialogBase';
import { loading } from '../loading/loading';
import { waitingStyle } from './waiting.css';

let waitingCount = 0;

class WaitingBox extends DialogBase {
	protected get box(): Nodes {
		return this.query(':scope>div');
	}
	protected getPanel(): Nodes {
		return this.query(':scope>div');
	}
	constructor() {
		super(dom.div(waitingStyle).append(dom.div().attr('tabindex', '0').append(loading())));
	}
}

let inst: WaitingBox | null = null;

export const Waiting = {
	show() {
		if (waitingCount === 0) {
			waitingCount = 1;
			inst = new WaitingBox();
			inst.show();
		} else {
			waitingCount++;
		}
	},
	close() {
		if (waitingCount > 0) {
			waitingCount--;
			if (waitingCount === 0) {
				inst?.close();
				inst = null;
			}
		}
	},
};
